<template>
  <el-row v-if="" :class="tabType + '_conbox_details'">
    <!-- 详情对话框 -->
    <el-row>
      <base target="_blank">
      <div class="email_title_info">
        <div class="email_dialog clearBoth">
          <div class="email_title ellipsis" :title="lastEmail.subject" v-if="lastEmail.subject"> {{lastEmail.subject}}</div>
          <div class="email_details_do clearBoth">
            <!--附件小图标-->
            <div class="attachment_box" v-if="lastEmail.attachment.length>0">
              <span class="iconfont icon-fujian attachment_btn">({{lastEmail.attachment.length}})</span>
            </div>
            <div class="forward_box" v-if="lastEmail.emailType === 'receive' && chatMsgCon.show">
              <el-tooltip class="item" effect="dark" transition="" :content="$t('email.mailForward')" placement="bottom">
                <span class="iconfont icon-zhuanjie1 zhuanjie1" @click.stop="showForwardFun"></span>
              </el-tooltip>
              <div class="forward_con" v-if="chatMsgCon.showForward">
                <div class="pop_arrow"></div>
                  <div class="email-search">
                    <EmailSearch :placeholder="addresseePerson" :size="'small'" :dataArray="autoAssociationArray" @inputChange="addresseeFun"></EmailSearch>
                  </div>
                  <div class="email-search">
                    <EmailSearch :placeholder="CopyPerson" :size="'small'" @inputChange="copyAddresseeFun"></EmailSearch>
                  </div>
                <!--<input-tag :inputData="chatMsgCon.forwardGroup" :validate="'Email'" @inputChange="forwardInputChange" :placeholder="$t('email.editEmailCopy')"></input-tag>-->
                <div class="btn-group">
                  <el-button size="mini" @click.stop="cancelForwardEmail">{{$t('public.cancel')}}</el-button>
                  <el-button type="primary" size="mini" @click.stop="forwardEmail">{{$t('email.forwardPrefix')}}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if = "lastEmail.from" class="padding-top5">
          <!--发件人-->
          <span>{{$t('email.sender')}}: </span>
          <span class="padding-left5">
              {{lastEmail.from.name}} <{{lastEmail.from.addr}}>
          </span>
        </div>
        <div class="padding-top5">
          <!--时间-->
          <span>{{$t('public.time')}}: </span>
          <span v-if = "lastEmail.createTime" class="padding-left5">
              {{lastEmail.createTime}}
          </span>
        </div>
        <div v-if = "lastEmail.to.length>0" class="padding-top5">
          <!--收件人-->
          <span>{{$t('email.recipient')}}: </span>
          <span v-for = "(to, index) in lastEmail.to" class="padding-left5" :key="to.name + index">
              {{to.name}} <{{to.addr}}>
          </span>
        </div>
        <div v-if = "lastEmail.cc.length>0" class="padding-top5">
          <!--抄送-->
          <span>{{$t('email.copyFor')}}: </span>
          <span  v-for = "(cc, index) in lastEmail.cc" class="padding-left5" :key="cc.name + index">
              {{cc.name}}<{{cc.addr}}>
          </span>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="email_all_content">
        <div class="email_detail_content" v-html="emailContent"></div>
        <div class="all_attachment_box clearBoth" v-if="lastEmail.attachment.length>0">
          <div class="all_attachment_box_title">
            <!--<span class="iconfont icon-fujian"></span>-->
            <!--附件-->
            <span>{{$t('public.attach')}}: {{lastEmail.attachment.length}}个</span>
            <!--展开收起-->
            <span class="unfolded" @click.stop="changeFold">{{foldedText}}</span>
          </div>
          <div class="all_attachments_ul clearBoth" v-for="(attach, index) in fujian" v-show="!(index>3&&folded===false)" :key="attach.name + index">
            <email-attachment :fileName="attach.name" :fileUrl="attach.url" @emailCommentBigImg="emailCommentBigImg"></email-attachment>
          </div>
        </div>
      </div>
    </el-row>
  </el-row>
</template>
<script type="text/javascript">
  /**
   * emailDetails 卡邮件详情组件
   * @author yangjiao
   * @path @/components/business-modules/email/emailDetails.vue
   * showDetailAttach 显示附件
   *
   *
   * @property {Object} lastEmail - 邮件详情信息
   *
   * @example
   *   <emailDetails
   :id="contactHistoryInfo._id"
   :lastEmail="lastEmail"
   v-if="contactHistoryInfo._id && contactHistoryInfo.labelValue === 2"
   >
   </emailDetails>

   */
  import { deepClone, Base64 } from '@/utils/m7Utils'
  import EmailAttachment from './EmailAttachment'
  import InputTag from '@/components/public-modules/input/InputTag'
  import EmailSearch from '@/components/public-modules/email-search/index'
  import { commitImgType2 } from '@/utils/publicMethod.js'
  export default {
    name: 'EmailDetails',
    data () {
      return {
        tabType: 'email_todo',
        loading: true,
        folded: false,
        remarkClone: '',
        addresseePerson: this.$t('email.recipient'),
        CopyPerson: this.$t('email.copyFor2'),
        autoAssociationArray: [],
        copyAddresseeData: [],
        addresseeData: [],
  //        fujian: [],
        foldedText: this.$t('email.unfolded')
      }
    },
    props: {
      lastEmail: Object,
      chatMsgCon: {
        type: Object,
        default () {
          return {
            show: false,
            showForward: '',
            forwardGroup: ''
          }
        }
      },
      currEmailSession: Object
    },
    computed: {
//      currEmailSession () {
//        let session = this.$store.state.email.current[this.tabType].currentSession
//        this.remarkClone = session.remark || ''
//        return session
//      },
      fujian () {
        return this.lastEmail.attachment
      },
      emailContent () {
        let content = deepClone(this.lastEmail.content) || ''
        let newData = content.replace(/<style[^>]*?>[\s\S]*?<\/style>/g, '')
        return newData
      }
    },
    components: {
      EmailAttachment,
      InputTag,
      EmailSearch
    },
    methods: {
      // 邮件的附件 图片放大
      emailCommentBigImg (data) {
        // 获取所有包含imgA的图片
        let _array = this.$el.querySelectorAll('.all_attachments_ul .imgA')
        commitImgType2(data, _array)
      },
      changeFold () {
        if (!this.folded) {
          this.folded = true
          this.foldedText = this.$t('email.folded')
        } else {
          this.folded = false
          this.foldedText = this.$t('email.unfolded')
        }
      },
      copyAddresseeFun (val) {
        this.copyAddresseeData = val
      },
      addresseeFun (val) {
        this.addresseeData = val
      },
      forwardInputChange (data) {
        this.chatMsgCon.forwardGroup = data
      },
      cancelForwardEmail () {
        this.chatMsgCon.forwardGroup = []
        this.chatMsgCon.showForward = false
      },
      showForwardFun () {
        this.autoAssociationArray = []
        if (!this.chatMsgCon.showForward) {
          this.$store.dispatch('getMemoryRecipient', {}).then((res) => {
            if (res.success && res.data.length) {
              this.autoAssociationArray = deepClone(res.data)
            }
            this.chatMsgCon.showForward = true
          })
        } else {
          this.chatMsgCon.showForward = false
        }
      },
      forwardEmail () {
        // let forwardAddr = deepClone(this.chatMsgCon.forwardGroup)
        // if (!forwardAddr.length) {
        //   this.$message({message: this.$t('email.forwardEmailNotAir'), type: 'error'})
        //   return
        // }
        if (!this.addresseeData.length) {
          this.$message({message: this.$t('email.forwardEmailNotAir'), type: 'error'})
          return
        }
        this.chatMsgCon.showForward = false
        let toAddr = this.addresseeData
        // forwardAddr.forEach((item) => {
        //   let address = {name: '', addr: item}
        //   toAddr.push(address)
        // })
        let ccArr = this.copyAddresseeData
        let attachments = []
        let attachFiles = deepClone(this.chatMsgCon.emailDetail.attachment)
        attachFiles.forEach((attach) => {
          let attachName = Base64.encode(attach.name)
          let attachUrl = Base64.encode(attach.url)
          attachments.push({name: attachName, url: attachUrl})
        })
        let emailSubject = this.$t('email.forwardPrefix') + ':' + this.chatMsgCon.emailDetail.subject
        let data = {
          sessionId: this.currEmailSession._id,
          shortId: this.currEmailSession.shortId,
          to: toAddr,
          from: this.currEmailSession.to,
          subject: emailSubject,
          supportEmail: this.currEmailSession.supportEmail,
          attachment: attachments,
          cc: ccArr,
          carryAgentInfo: true,
          displayName: this.agentName,
          content: this.chatMsgCon.emailDetail.content,
          contentText: this.chatMsgCon.emailDetail.contentText
        }
        forwardEmailInbox(this.$store, data).then(() => {
          this.chatMsgCon.showDetail = false
          this.chatMsgCon.forwardGroup = []
        })
        this.addresseeData = []
      }
    }
  }
  function forwardEmailInbox (store, data) {
    return store.dispatch('forwardEmail', data)
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .unfolded
    color $c-main
    padding-left 30px
    cursor pointer
  .padding-top5
    padding-top 5px
  .padding-left5
    padding-left 5px
  .email_all_content
    max-height calc(100vh - 400px)
    overflow-y auto
    padding-top 20px
  .email_title
    font-size 22px
    float left
    width 100%
    padding-bottom 5px
    color $cf-gray2
    font-weight bold
  .email_details_do
    color $c-main
    position absolute
    right 0
    width 80px
    .iconfont
      cursor pointer
  .email_title_info
    border-bottom 1px solid #cdcdcd
    padding-bottom 10px
    .padding-top5
      color $cf-gray3
  .email_dialog
    position relative
    padding-right 90px
    width 100%
    box-sizing border-box
    line-height 22px
  .forward_box
    display inline-block
    position relative
    float right
    .forward_con
      position absolute
      background $cf-white
      width 280px
      border-radius 2px
      border 1px solid #D3DCE6
      padding 10px
      z-index 2000
      font-size 12px
      box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
      left -150px
      top 26px
    .pop_arrow
      color transparent
      top -13px
      left 50%
      margin-right 3px
      border-top-width 0
      border-bottom-color #D3DCE6
      border-width 6px
      position absolute
      display block
      width 0
      height 0
      border-style solid
    .pop_arrow:after
      content " "
      border-width 6px
      position absolute
      display block
      width 0
      height 0
      border-color transparent
      border-style solid
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: $cf-white;
    .email-search
      margin-bottom 20px
  .attachment_box
    position relative
    display inline-block
  .all_attachment_box
    .iconfont
      color $c-main
  .all_attachment_box_title
    margin 18px 0
    span
      color $cf-gray3
  .all_attachments_ul
  .attach_and_copy
    float left
    line-height 28px
    .addCopy,.addAttach
      display inline-block
      margin-left 10px
      cursor pointer
      color #a5a5a5
    .addCopy.click,.addAttach.click
      color $c-main
  .email_detail_content
    color $cf-gray1
  .btn-group
    text-align center
    margin-top 14px
</style>
